<template>
  <el-select v-model="formModel.name" :placeholder="placeholder" :style="'width:'+width+'px'" ref="selectRef">
    <template #empty>
      <div style="margin: 6px">
        <el-form inline>
          <el-form-item label="名称：" style="margin-right: 8px">
            <el-input v-model="name" placeholder="请输入权限名称" style="width: 100%"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findAll">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="perms" border stripe highlight-current-row @row-click="onRowClick" ref="tblRef"
                  style="width: 500px">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="ID" prop="id" width="60"/>
          <el-table-column prop="name" label="名称"/>
          <el-table-column prop="enabled" label="是否启用" width="90" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.enabled" inline-prompt active-text="是" inactive-text="否"/>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pi" v-model:current-page="pi.pageNo" v-model:page-size="pi.pageSize" :total="pi.total"
                       layout="total, prev, pager, next" background :pager-count="5" @change="findAll"/>
        <div style="margin-top: 8px;text-align: right;">
          <el-button type="primary" @click="onConfirm">确定</el-button>
          <el-button type="primary" @click="onCancel">取消</el-button>
        </div>
      </div>
    </template>
  </el-select>
</template>

<style scoped>
.pi {
  margin-top: 6px;
}

.el-form {
  text-align: left;
}
</style>

<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import {findPById,findPAll} from "@/api/PermApi.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  modelValue: {//对应父组件的v-model属性
    //type: Number,//可选类型：String、Number、Boolean、Array、Object、Date、Function、Symbol、Error，注意：值不允许为null
    validator: value => value === null || typeof value === 'number',
    required: true
  },
  placeholder: String,
  width: Number
});

watch(() => props.modelValue, newVal => {
  if (newVal === null) {
    formModel.id = null;
    formModel.name = null;
  } else {
    if (formModel.id !== newVal) {
      formModel.id = newVal;
      //数据回显
        findPById(newVal).then(resp => {
        formModel.name = resp.data.name;
      });
    }
  }
});

//update:modelValue是针对父组件v-model的更新事件
const emit = defineEmits(["update:modelValue"]);

//教练
const formModel = reactive({
  id: null,
  name: null
});

//监听一个响应式值的变化
watch(formModel, () => {
  //调用父组件的update:modelValue函数，并传递值formMode.id，相当于修改父组件v-model的值
  emit("update:modelValue", formModel.id);
});

//所有权限数据
const perms = ref();
const name = ref();
//分页参数
const pi = reactive({
  pageNo: 1,
  pageSize: 5,//固定为10
  total: 0
});

onMounted(() => {
  findAll();
});

//查询全部教练
async function findAll() {
  let params = {
    pageNo: pi.pageNo,
    pageSize: pi.pageSize,
    name: name.value
  };

  let resp = await findPAll(params);
  if (resp.code==='200') {
    perms.value = resp.data.records;
    pi.pageNo = resp.data.current;
    pi.total = resp.data.total;
  }
}

//点击行时触发
function onRowClick(row) {
  formModel.id = row.id;
  formModel.name = row.name;
  selectRef.value.blur();
}

//表格实例
const tblRef = ref();

//点击确定按钮触发
function onConfirm() {
  let rows = tblRef.value.getSelectionRows();
  if (rows.length === 0) {
    ElMessage.warning("未选中");
  } else if (rows.length > 1) {
    ElMessage.warning("限选一行");
  } else {
    onRowClick(rows[0]);
  }
}

//select实例
const selectRef = ref();

//点击取消按钮触发
function onCancel() {
  selectRef.value.blur();
}
</script>